import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    dataList:[],
    inputValue:'',
    nextId:5,
    viewKey:'all'
  },
  // 修改数据的操作写在这里
  mutations: {
    getList(state,list){
      state.dataList=list
    },
    changeInput(state,value){
      state.inputValue=value
    },
    addList(state){
      const newData={
        id:state.nextId,
        info:state.inputValue.trim(),
        done:false
      }
      state.dataList.push(newData)
      state.inputValue=''
      state.nextId++
    },
    deleteThing(state,thingId){
      const index= state.dataList.findIndex(item=>item.id===thingId)
      if(index!=-1){
        return state.dataList.splice(index,1)
      }
    },
    finshThings(state,params){
      const index=state.dataList.findIndex(item=> item.id===params.id)
      if(index!=-1){
        state.dataList[index].done=params.checkStatus
      }
      // console.log(state.dataList);
    },
    removeFinsh(state){
    state.dataList=state.dataList.filter(item=>item.done===false)
    },
    clickChange(state,viewName){
      state.viewKey=viewName
    }

  },
  // 异步函数写在actions中,不做修改数据的操作
  actions: {
    getDataList(context){
      axios.get('/data.json').then(({data})=>{
      // console.log(data);
        context.commit('getList',data)
      })
    }
  },
  getters: {
    getRemainNum(state){
     const list= state.dataList.filter(item=>item.done===false)
     return list.length
    },
    showClickData(state){
      if(state.viewKey==='all'){
        return state.dataList
      }
      if(state.viewKey==='notFinsh'){
        return state.dataList.filter(item=>item.done===false)
      }
      if(state.viewKey==='finsh'){
        return state.dataList.filter(item=>item.done===true)
      }
    }
  }
})
